<template>
  <div>
    <div>
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="问题标签名1">
          <el-input v-model="form.user" placeholder="标签名" clearable @clear="clear" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getTagVoList">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="dialogVisible = true">添加标签</el-button>
        </el-form-item>
      </el-form>
      <el-dialog
        title="添加标签"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-input v-model="addTagName" focus placeholder="请输入标签名" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addTag">添 加</el-button>
        </span>
      </el-dialog>
    </div>
    <div>
      <!-- 删除 弹框 -->
      <el-dialog
        title="删除标签"
        :visible.sync="deletedialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-tag v-for="tag in currentSubList" :key="tag.id" closable :type="tag.type" style="margin-left:6px;margin-top:5px">
          {{ tag.name }}
        </el-tag>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deletedialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="deletedialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          label="问题标签1"
          width="180"
        >
          <template slot-scope="scope">
            <el-tag effect="dark" style="margin-left: 10px">{{ scope.row.ptagName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="问题标签2"
          width="1200px"
        >
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag v-for="subTag in scope.row.subTagList" :key="subTag.id" style="margin-left:10px" size="medium">{{ subTag.name }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleAddTag(scope.$index, scope.row)"
            >新增</el-button>
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { addTag2, delTag1, getTag2List } from '@/api/tag'
export default {
  data() {
    return {
      addTagName: '',
      dialogVisible: false,
      deletedialogVisible: false,
      currentSubList: [],
      form: {
        user: ''
      },
      tableData: [],
      search: '',
      selected_id: ''
    }
  },
  mounted() {
    this.getTagVoList()
  },
  methods: {
    clear() {
      this.getTagVoList()
    },
    addTag() {
      addTag2({ name: this.addTagName, ptagId: this.selected_id }).then(res => {
        if (res.code !== 1) {
          this.$message.error(res.data)
        } else {
          this.getTagVoList()
        }
      })
      this.dialogVisible = false
      this.addTagName = ''
      this.selected_id = ''
    },
    delTag(id) {
      delTag1({ id: id }).then(res => {
        this.getTagList()
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.selected_id = ''
          done()
        })
        .catch(_ => {})
    },
    handleAddTag(index, row) {
      this.selected_id = row.ptagId
      this.dialogVisible = true
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      this.deletedialogVisible = true
      this.currentSubList = row.subTagList
      // console.log(index, row)
      // console.log(this.currentSubList)
    },
    getTagVoList() {
      getTag2List({ tagName: this.form.user }).then(res => {
        this.tableData = res.data
      })
    }
  }
}
</script>
